<template>
  <div class="service-type-management-add">
    <el-card>
      <div class="card-header">
        <span>添加服务类型</span>
      </div>
      
      <el-form :model="serviceTypeForm" :rules="rules" ref="serviceTypeForm" label-width="120px">
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="serviceTypeForm.typeName" placeholder="请输入服务类型名称" maxlength="100"></el-input>
        </el-form-item>
        
        <el-form-item label="描述信息" prop="description">
          <el-input v-model="serviceTypeForm.description" placeholder="请输入描述信息" type="textarea" maxlength="500" show-word-limit></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ServiceTypeManagementAdd',
  data() {
    return {
      serviceTypeForm: {
        typeName: '',
        description: ''
      },
      rules: {
        typeName: [
          { required: true, message: '请输入服务类型名称', trigger: 'blur' },
          { max: 100, message: '服务类型名称不能超过100个字符', trigger: 'blur' }
        ],
        description: [
          { max: 500, message: '描述信息不能超过500个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.serviceTypeForm.validate((valid) => {
        if (valid) {
          // 检查服务类型名称是否已存在
          this.$api.serviceTypeApi.getAllList()
            .then(res => {
              const serviceTypes = res && res.data || [];
              const exists = serviceTypes.some(type => type.typeName === this.serviceTypeForm.typeName);
              
              if (exists) {
                this.$message.error('服务类型名称已存在');
                return;
              }
              
              // 提交表单
              this.$api.serviceTypeApi.add(this.serviceTypeForm)
                .then(() => {
                  this.$message.success('服务类型添加成功');
                  this.$router.push('/service-type-management');
                })
                .catch(error => {
                  console.error('添加服务类型失败:', error);
                  this.$message.error('添加服务类型失败: ' + error.message);
                });
            })
            .catch(error => {
              console.error('检查服务类型名称失败:', error);
              // 继续提交，让后端进行验证
              this.$api.serviceTypeApi.add(this.serviceTypeForm)
                .then(() => {
                  this.$message.success('服务类型添加成功');
                  this.$router.push('/service-type-management');
                })
                .catch(error => {
                  console.error('添加服务类型失败:', error);
                  this.$message.error('添加服务类型失败: ' + error.message);
                });
            });
        }
      });
    },
    
    handleCancel() {
      this.$router.push('/service-type-management');
    }
  }
};
</script>

<style scoped>
.service-type-management-add {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>